import React,{useEffect,useState} from 'react'
import {Wrapper,TabItem,Tab} from './style'
import { useNavigate, NavLink,Outlet } from 'react-router-dom'
import { debounce } from "@/api/utils";

const Footer = () => {
    const [show,setShow]=useState(true)
    useEffect(()=>{
        debounce(window.addEventListener('scroll',handleScrollTop),1000)
        function handleScrollTop(){
          const top = document.documentElement.scrollTop //获取scroll偏移值
          if(top>10){
            // console.log(top)
            setShow(false)
          }else{
            setShow(true)
          }
        }
        },[])
  return (
    <Wrapper>
        {/* <Logo /> */}
        <div className="bar">
          <Tab>
          <NavLink to="/home">
              <TabItem>
                  <i className='iconfont icon-shuaxin'></i>
                  <span>首页</span>
              </TabItem>
          </NavLink>
          <NavLink to="/destination">
              <TabItem>
                  <i className='iconfont icon-mudedi'></i>
                  <span>目的地</span>
              </TabItem>
          </NavLink>
          <NavLink to="/show">
              <TabItem>
                  <i className='iconfont icon-logobg' style={{color:"#ccc"}}></i>
                  <span>发布</span>
              </TabItem>
          </NavLink>
          <NavLink to="/shopping">
              <TabItem>
                  <i className='iconfont icon-shangcheng'></i>
                  <span>商城</span>
              </TabItem>
          </NavLink>
          <NavLink to="/mine">
              <TabItem>
                  <i className='iconfont icon-wode'></i>
                  <span>我的</span>
              </TabItem>
          </NavLink>  
          </Tab>
        </div>
    </Wrapper>
  )
}

export default Footer
